<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {

				text-align: center;
				margin: 50px;
			}

			table {
				border: 2px solid;
				margin: auto;
				width: 500px;
			}

			th,
			td {
				text-align: center;
				border: 1px solid;
			}
		</style>
	</head>
	<body>
		<div>
			<input id="id" type="text" placeholder="请输入学生编号">
			<input id="name" type="text" placeholder="请输入学生姓名">
			<input id="sex" type="text" placeholder="请输入学生性别">
			<input id="btn_add" type="button" value="添加">
		</div>

		<table>
			<caption>学生信息表</caption>
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
			<tr>
				<th>1</th>
				<th>李淑盈</th>
				<th>女</th>
				<th><a href="javaScript:void(0)" onclick="del(this)">删除</a></th>
			</tr>
		</table>
		<script>
			//实现添加
			var btn_add = document.getElementById("btn_add");
			btn_add.onclick = function() {
				var id = document.getElementById('id').value;
				var name = document.getElementById('name').value;
				var sex = document.getElementById('sex').value;

				// var res = [id, name, sex];


				// var tr = document.createElement("tr");

				// for (var i = 0; i < 4; i++) {
				// 	var th = document.createElement("th");
				// 	//添加信息的两种方式
				// 	// th.innerHTML = res[i];
				// 	if (i == 3) {
				// 		// 创建超链接
				// 		// var a = document.createElement('a');
				// 		// a.setAttribute("href", "javaScript:void(0)");
				// 		// a.setAttribute("onclick", "del(this)");
				// 		// a.appendChild(document.createTextNode("删除"));

				// 		// 一句代码搞定
				// 		th.innerHTML = '<a href="javaScript:void(0)" onclick="del(this)">删除</a>';

				// 		// 简便写法（只有标签自带的属性才可以这样写）
				// 		// a.href = "javaScript:void(0)";
				// 		// a.innerHTML = '删除';
				// 		// a.onclick = "del(this)"; // 不行 onclick 是时间而不是标签的属性所以这样写无效


				// 		//添加到最后一个
				// 		// th.appendChild(a);
				// 	} else {
				// 		// 添加id 姓名 性别
				// 		th.appendChild(document.createTextNode(res[i]));
				// 	}
				// 	// 添加到行中
				// 	tr.appendChild(th);
				// }

				// 添加到表格中

				var table = document.getElementsByTagName("table")[0];
				table.innerHTML += "<tr>\n" +
					"<th>" + id + "</th>\n" +
					"<th>" + name + "</th>\n" +
					"<th>" + sex + "</th>\n" +
					'<th><a href="javaScript:void(0)" onclick="del(this)">删除</a></th>' +
					"</tr>"

			}



			// 实现删除
			function del(obj) {
				var th = obj.parentNode;
				var tr = th.parentNode;
				var table = tr.parentNode;
				table.removeChild(tr);
			}
		</script>

	</body>
</html>
